<template>
  <el-container>

    <!--头部区域-->
    <el-header>
      <img src="imgs/logo.png" alt="" class="logo">
      <!--      <span>网易云音乐</span>-->

      <!--头部搜索区域-->
      <el-input placeholder="搜索单曲,歌手,视频,歌单" v-model="searchData"
                @keyup.enter.native="toSearchPage" size="small"
                suffix-icon="el-icon-search" @focus="showHotSearch"
                @blur="hideHotSearch" id="searchInput">
        <el-button slot="suffix" class="searchBtn" size="mini" @click="toSearchPage"></el-button>
      </el-input>
      <!--热搜显示-->
      <div class="showHot" v-if="isHot">
        <div class="box">
          <span style="color: gray;font-size: 15px;margin-top: 0">热搜榜</span>
          <!--item-->
          <span v-for="(item,index) in hotSearchData" :key="index" style="display: flex;align-items: center">
          <!--索引-->
            <div style="width: 20px;color: red">
            {{ index + 1 }}
            </div>
            <!--信息-->
            <div
                style="color: black;width: 270px;padding-left: 15px;display: flex;flex-direction: column;cursor: pointer"
                @mousedown="hotToSearchPage(hotSearchData[index].searchWord)">
              <div style="display: flex;flex-wrap: wrap;align-items: center">
              <!--搜索名称-->
              <p style="font-size: 6px">{{ hotSearchData[index].searchWord }}</p>
                <!--HOT是否显示-->
              <p v-show="hotSearchData[index].iconType"
                 style="padding-left:10px;font-size:8px;color: red;font-weight: bold;font-style: italic">HOT</p>
                <!--热搜指数-->
              <p style="font-size: 6px;color: gray;padding-left: 10px;margin-top: 9px">{{
                  hotSearchData[index].score
                }}</p>
            </div>
              <!--热搜详情-->
            <p style="font-size: 6px;color: gray;margin-top: 0">{{ hotSearchData[index].content }}</p>
          </div>
        </span>
        </div>
      </div>

      <!--右侧登录区域-->
      <div class="rightContainer" style="display: flex">
        <img v-if="currentUserInfo === null" src="imgs/userIcon.png" class="userIcon">
        <img v-else :src="currentUserInfo.avatarUrl" class="userIcon">

        <span v-if="currentUserInfo === null" style="cursor:pointer;" @click="handleLogin">
                    未登录
                </span>

        <span v-else style="user-select: none">{{ currentUserInfo.nickname }}</span>
        <span v-if="level!==-1" style="padding: 2px 5px;user-select: none">Lv.{{ level }}</span>
        <el-button type="danger" @click="logout" v-if="currentUserInfo !== null" size="mini"
                   style="height: 50%;margin-top: 12px;margin-left: 5px;">
          退出
        </el-button>
      </div>

    </el-header>

    <!--主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="210px" style="overflow: hidden;overflow-y: scroll;height: 600px">

        <el-menu default-active="/findMusic" :router="true">
          <el-menu-item-group>
            <template slot="title">推荐</template>
            <el-menu-item index="/findMusic">发现音乐</el-menu-item>
            <el-menu-item index="/video">视频</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">我的音乐</template>
            <el-menu-item index="/cloudMusic">我的音乐云盘</el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">创建的歌单</template>
            <el-menu-item :index="'/songlist/'+item.id" @click="changePlaylistId(item.id)"
                          v-for="(item,index) in currentUserPlayList" :key="index"
                          v-if="!item.subscribed" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              {{ item.name }}
            </el-menu-item>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">收藏的歌单</template>
            <el-menu-item :index="'/songlist/'+item.id" @click="changePlaylistId(item.id)"
                          v-for="(item,index) in currentUserPlayList" :key="index"
                          v-if="item.subscribed" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              {{ item.name }}
            </el-menu-item>
          </el-menu-item-group>

        </el-menu>

      </el-aside>

      <el-container>
        <el-main style="height: 700px">
          <!--
              setMusicUrl:设置当前需要播放的url连接,子路由(DiyRecommend.vue)的banner调用传递url
              setSongListInfo:设置当前歌单信息,子路由(MusicListTable.vue)的点击事件传递歌单信息
              musicDuration给子组件传递值  子组件prop接收
              curId给子组件传值
          -->
          <router-view ref="child" @setMusicUrl="setMusicUrl" :musicDuration="musicDuration"
                       @refreshPrivatePlaylist="getUserPrivatePlayList"
                       :isPlay="isPlay" :curId="curId" @setSongListInfo="setSongListInfo">
          </router-view>
        </el-main>
      </el-container>
    </el-container>

    <el-footer style="position:fixed;bottom: 0;width:100%;z-index: 100;min-width: 1000px" height="50">
      <!--底部播放信息显示-->
      <!--点击左下角角标 跳转歌曲详情界面-->
      <div
          style="position: absolute;bottom: 41px;width: 200px;padding-left: 5px;background-color: #ffffff;box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3)">
        <div style="display: inline-block">
          <img :src="music.al.picUrl" alt="" @click="toMusicDetailPage"
               style="width: 60px;height: 63px;cursor:pointer;border-radius: 5px">
        </div>
        <div style="position: absolute;bottom: 25px;left: 70px;width: 140px">
          <p style="font-size: 10px;margin: 0">{{ music.name }}</p>
          <p v-for="(item,index) in music.ar"
             style="color: gray;font-size: 10px;cursor: pointer;width:60px;margin: 5px 0 0 0;display: inline"
             @click="toSingerPage(item.id)">
            {{ index !== music.ar.length - 1 ? item.name + ' /' : item.name }}
          </p>
        </div>
      </div>

      <!--进度条及一些组件-->
      <el-row style="border-top: 1px solid rgb(230,230,230);background-color: white">
        <!--一首 暂停 下一首控件-->
        <el-col :span="2.5">
          <!--          <img src="imgs/prev.png" @click="changePrevMusic" alt=""-->
          <!--               style="border-radius: 100%;cursor: pointer;">-->
          <ion-icon name="caret-back-circle" @click="changePrevMusic"
                    style="position:absolute;cursor: pointer;left: 50px;top: 3px;font-size: 32px;color: red"></ion-icon>
          <!--          <img v-if="isPlay" src="imgs/pauseMusic.png" alt="" @click="playMusic"-->
          <!--               style="border-radius: 100%;cursor: pointer;margin-left: 25px;width: 40px;height: 40px;">-->
          <ion-icon name="caret-forward-circle" v-if="!isPlay" @click="playMusic"
                    style="position:absolute;cursor: pointer;left: 81px;top: -1px;font-size: 40px;color: red"></ion-icon>
          <!--          <img v-else src="imgs/playMusic.png" alt="" @click="playMusic"-->
          <!--               style="border-radius: 100%;cursor: pointer;margin-left: 25px;width: 40px;height: 40px;">-->
          <ion-icon name="pause-circle" @click="playMusic" v-if="isPlay"
                    style="position:absolute;cursor: pointer;left: 81px;top: -1px;font-size: 40px;color: red"></ion-icon>
          <!--          <img src="imgs/next.png" alt="" @click="changeNextMusic"-->
          <!--               style="border-radius: 100%;cursor: pointer;margin-left: 25px;">-->
          <ion-icon name="caret-forward-circle" @click="changeNextMusic"
                    style="position:absolute;cursor: pointer;left: 120px;top: 3px;font-size: 32px;color: red"></ion-icon>
        </el-col>

        <el-col style="position: relative;left: 100px;display: flex;justify-content: center;align-items: center"
                :span="12" :offset="2">

          <!--秒数通过 过滤器处理成看得懂的样式-->
          <span style="user-select: none;">{{
              this.musicDuration | timeFormat
            }}</span>

          <!--音乐播放进度条-->
          <el-slider v-model="musicDuration" :max="totalDuration" @change="musicDurationChange"
                     :show-tooltip="false" style="width: 500px;padding-left: 20px"></el-slider>

          <span style="user-select: none;padding-left: 20px">{{
              totalDuration | timeFormat
            }}</span>
        </el-col>

        <el-col :span="5"
                style="position: relative;padding-left:50px;display: flex;justify-content: center;align-items: center"
                :offset="1">
          <!--播放模式-->
          <ion-icon title="列表循环" id="loop" name="repeat-outline" @click="loopSong"
                    style="font-size: 20px;padding-left: 20px;cursor: pointer"></ion-icon>
          <!--音量控制-->
          <ion-icon id="voice" name="volume-high-outline"
                    @click="silence" style="font-size: 20px;padding-left: 20px;cursor: pointer"></ion-icon>
          <!--音量条-->
          <el-slider v-model="musicVolume" :show-tooltip="false"
                     style="width: 120px;padding-left: 20px"
                     @change="musicVolumeChange">
          </el-slider>
          <!--歌单显示-->
          <ion-icon name="reader-outline" @click="showRightPlayList"
                    style="cursor:pointer;font-size: 20px;padding-left: 20px">
          </ion-icon>

        </el-col>
      </el-row>

      <audio :src="musicUrl" autoplay class="playMusicAudio"></audio>
      <!--现播放歌单-->
      <div v-show="showRightPlayListDialog" style="position: absolute;
      top: -350px;left: 950px;height: 350px;width: 450px;z-index: 999;
      overflow: hidden;overflow-y: scroll;border: 1px solid rgba(156,159,76,0.6);
      border-radius: 15px;box-shadow: 0px -5px 10px 5px rgba(156,159,76,0.2);background-color: white">
        <el-table :data="currentMusicListInfo" ref="playTable" highlight-current-row border stripe
                  style="cursor: context-menu" @row-dblclick="playRightMusicList">

          <el-table-column label="#" type="index" align="center" width="65px">
            <template scope="scope">
              <p style="color: red;display: inline" v-if="curId === scope.row.id">{{ scope.$index + 1 }}</p>
              <p v-else>{{ scope.$index + 1 }}</p>
            </template>
          </el-table-column>

          <el-table-column label="音乐标题" prop="name" align="center">
            <template scope="scope">
              <p style="color: red" v-if="curId === scope.row.id">{{ scope.row.name }}</p>
              <p v-else>{{ scope.row.name }}</p>
            </template>
          </el-table-column>

          <el-table-column label="歌手" prop="ar[0].name" align="center">
            <template scope="scope">
              <p style="color: red" v-if="curId === scope.row.id">
                {{ scope.row.ar[0].name ? scope.row.ar[0].name : "未知歌手" }}</p>
              <p v-else>{{ scope.row.ar[0].name ? scope.row.ar[0].name : "未知歌手" }}</p>
            </template>
          </el-table-column>

          <el-table-column label="专辑名" prop="al.name" align="center">
            <template scope="scope">
              <p style="color: red" v-if="curId === scope.row.id">
                {{ scope.row.al.name ? scope.row.al.name : "未知专辑" }}</p>
              <p v-else>{{ scope.row.al.name ? scope.row.al.name : "未知专辑" }}</p>
            </template>
          </el-table-column>

          <el-table-column label="时长" prop="dt" width="80px" align="center">
            <template scope="scope">
              <p style="color: red" v-if="curId === scope.row.id">{{ scope.row.dt }}</p>
              <p v-else>{{ scope.row.dt }}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-footer>

    <!--登录界面的弹出-->
    <el-dialog title="请使用网易云app扫码登录"
               :visible.sync="loginDialogVisible"
               width="300px" @close="handleLoginDialogClosed">
      <img id="QRCODE" src="" alt="">
      <!--      <div>-->
      <!--        <img src="imgs/phone.png" style="display: block;margin: 0 auto" alt="">-->
      <!--        <el-form :model="loginInfo" :rules="loginInfoRules" ref="loginInfoRuleForm" style="margin-top: 25px;">-->

      <!--          <el-form-item prop="phone">-->
      <!--            <el-input style="display: block;margin:0 auto;width: 60%" prefix-icon="el-icon-user"-->
      <!--                      v-model="loginInfo.phone" placeholder="请输入手机号"></el-input>-->

      <!--          </el-form-item>-->

      <!--          <el-form-item prop="password">-->
      <!--            <el-input style="display: block;margin:0 auto;width: 60%" show-password-->
      <!--                      prefix-icon="el-icon-lock" v-model="loginInfo.password" type="password"-->
      <!--                      placeholder="请输入密码"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <el-button @click="loginMusic" type="danger"-->
      <!--                   style="background-color: red;width: 60%;display: block;margin: 0 auto">登录-->
      <!--        </el-button>-->
      <!--      </div>-->

    </el-dialog>
  </el-container>
</template>

<script>
import SearchPage from "./findMusic/search/SearchPage";
import jrQrcode from "jr-qrcode";

export default {
  data() {
    return {
      //用户名字
      username: '',
      //用户头像
      userImg: '',
      cookieLogin: '',
      //定时器
      timer: 0,
      //热搜展示
      isHot: false,
      //播放音乐的链接
      musicUrl: '',
      //当前音乐详情对象
      music: {
        name,
        al: {
          picUrl: ''
        },
        ar: [
          {
            name: ''
          }
        ]
      },
      //当前音乐的进度条
      musicDuration: 0,
      //当前音乐的id
      curId: 0,
      //总进度条
      totalDuration: 0,
      //音乐的音量
      musicVolume: 100,
      //默认是否在播放
      isPlay: false,
      //播放列表
      playListInfo: window.localStorage.getItem('playList') === null ? [] : window.localStorage.getItem('playList').split(','),
      //当前播放的歌单的所有歌曲的url和其他信息
      currentMusicListInfo: [],
      //当前播放的歌单的id
      songListInfo: [],
      // 展示右边的歌单对话框
      showRightPlayListDialog: false,
      //展示登录的对话框
      loginDialogVisible: false,
      //登录的信息
      loginInfo: {
        phone: '',
        password: ''
      },
      //登录的校验规则
      loginInfoRules: {
        phone: [
          {required: true, message: ' ', trigger: 'blur'}
        ],
        password: [
          {required: true, message: ' ', trigger: 'blur'}
        ]
      },
      //当前用户的用户信息
      currentUserInfo: window.localStorage.getItem('currentUserInfo') === null ? null : JSON.parse(window.localStorage.getItem('currentUserInfo')),
      //当前用户的歌单
      currentUserPlayList: [],
      //搜索条件
      searchData: '五月天',
      //热搜列表
      hotSearchData: [],
      //用户等级
      level: window.localStorage.getItem('level') === null ? -1 : window.localStorage.getItem('level')
    }
  },
  watch: {
    //监听组件中的当前音乐id的变化 放入localstorage中供给各个组件使用
    curId(newVal) {
      // window.localStorage.setItem('curPlayMusicId',newVal);
      //使用定义好的方法设置新的localstorage中的值 main.js中定义
      this.resetSetItem('curPlayMusicId', newVal);
    }
  },
  created() {
    //用户已登录
    if (this.currentUserInfo !== null) {
      this.getUserPrivatePlayList()
    }
    // this.$http.get('login/status').then(res => {
    //   this.currentUserInfo = res.data.data.profile
    // })
    //呜呜呜
    this.playListInfo.forEach((item, index) => {
      this.playListInfo[index] = Number.parseInt(item)
    })
  },
  mounted() {
    // 正在播放的歌曲
    if (window.localStorage.getItem('musicUrl')) {
      this.musicUrl = window.localStorage.getItem('musicUrl')
      this.music = JSON.parse(window.localStorage.getItem('music'))
      this.curId = this.music.id
      this.setAudioTagsInfo()
      if (Number.isNaN(this.totalDuration)) {
        this.changeNextMusic()
      }
    }
  },
  methods: {
    //点击歌手名跳转歌手详细页面
    toSingerPage(id) {
      this.$router.push('/singer/' + id)
    },
    loopSong() {
      if (this.$('#loop').attr('name') === 'infinite-outline') {
        this.$('#loop').attr({'name': "repeat-outline", 'title': '列表循环'})
        let audio = this.$('.playMusicAudio')[0];
        audio.loop = false
      } else {
        this.$('#loop').attr({'name': "infinite-outline", 'title': '单曲循环'})
        let audio = this.$('.playMusicAudio')[0];
        audio.loop = true
      }
    },
    generateQR(url) {
      let obj = url;  //需要生成的内容
      var imgBase64 = jrQrcode.getQrBase64(obj); //生成二维码
      return imgBase64
    },
    // 获取热搜榜信息
    async getHot() {
      const res = await this.$http.get('search/hot/detail')
      this.hotSearchData = res.data.data
    },
    // 展示热搜榜
    showHotSearch() {
      this.isHot = true
      this.getHot()
    },
    // 隐藏热搜榜
    hideHotSearch() {
      this.isHot = false
    },
    //设置当前播放url
    setMusicUrl(mUrl, detail) {
      //设置关于音乐的链接和歌曲信息
      this.musicUrl = mUrl;
      this.music = detail;
      this.curId = detail.id;
      window.localStorage.setItem('musicUrl', mUrl)
      window.localStorage.setItem('music', JSON.stringify(detail))
      //将当前轮播图传来的歌曲id放入歌单中
      const i = this.playListInfo.indexOf(detail.id)
      if (i !== -1)
        this.playListInfo.splice(i, 1)
      this.playListInfo.splice(this.curId + 1, 0, detail.id)
      window.localStorage.setItem('playList', this.playListInfo.toString())
      this.showRightPlayListDialog = false
      this.setAudioTagsInfo()
    },
    //设置audio的各种信息
    setAudioTagsInfo() {
      let audio = this.$('.playMusicAudio')[0];
      //监听audio的timeUpdate事件
      audio.addEventListener("timeupdate", () => {
        //获取歌曲的总长度 example: 257s
        this.totalDuration = audio.duration;
        //获取歌曲时间
        this.musicDuration = audio.currentTime;
        //当前歌曲播放完毕自动播放下一首
        if (audio.currentTime >= audio.duration) {
          this.isPlay = false
          this.changeNextMusic()
        }
      });
      //更新音乐播放状态
      this.isPlay = true
    },
    //音乐进度条值变化的方法
    musicDurationChange() {
      if (this.totalDuration === 0) return;
      if (this.musicDuration === this.totalDuration) this.changeNextMusic();
      let audio = this.$('.playMusicAudio')[0];
      audio.currentTime = this.musicDuration
    },
    //音量变化
    musicVolumeChange() {
      this.volumeChange(this.musicVolume / 100)
    },
    //改变音量的函数
    volumeChange(sum) {
      let audio = this.$('.playMusicAudio')[0];
      audio.volume = sum
    },
    //静音和改变图标
    silence() {
      if (this.musicVolume !== 0) {
        this.$('#voice').attr('name', 'volume-mute-outline')
        this.volumeChange(0);
        this.musicVolume = 0;
      } else {
        this.$('#voice').attr('name', 'volume-high-outline')
        this.volumeChange(0.5);
        this.musicVolume = 50;
      }
    },
    //控制暂停播放
    playMusic() {
      var audio = this.$('.playMusicAudio')[0];
      if (this.musicUrl !== '') {
        if (!audio.paused) {
          audio.pause()
        } else {
          audio.play()
        }
        this.isPlay = !this.isPlay
      }
    },
    //接受子路由传递过来的歌单信息
    async setSongListInfo(songList, curId) {
      this.playListInfo = songList
      //将当前歌单信息放入localStorage
      window.localStorage.setItem('playList', songList)
      //设置当前歌单点击需要播放的音乐链接
      const res = await this.$http.get('song/url', {params: {id: curId}})

      if (res.data.data[0].url === null) {
        this.$message.info('当前歌曲暂不可用,已为您自动跳过')
        this.curId = curId
        this.changeNextMusic()
      } else {
        this.musicUrl = res.data.data[0].url
        window.localStorage.setItem('musicUrl', this.musicUrl)
        //设置当前歌单的详细信息
        this.$http.get('song/detail', {params: {ids: curId}}).then(res => {
          this.music = res.data.songs[0]
          window.localStorage.setItem('music', JSON.stringify(this.music))
        })
        //设置当前播放音乐的id
        this.curId = curId
        //设置audio的各种信息
        this.setAudioTagsInfo()
      }
    },
    //根据id获取音乐详情
    getMusicDetail(musicId) {
      this.$http.get('song/detail', {params: {ids: musicId}}).then(res => {
        this.music = res.data.songs[0]
        window.localStorage.setItem('music', JSON.stringify(this.music))
      })
    },
    //根据id获取音乐url
    getMusicUrl(musicId) {
      this.$http.get('song/url', {params: {id: musicId}}).then(res => {
        this.musicUrl = res.data.data[0].url
        window.localStorage.setItem('musicUrl', this.musicUrl)
      })
    },
    //切换下一首歌
    changeNextMusic() {
      let nextIndex = this.playListInfo.findIndex(target => {
        return target === this.curId
      }) + 1
      if (nextIndex === this.playListInfo.length) nextIndex = 0
      const nextOne = this.playListInfo[nextIndex];
      this.setSongListInfo(this.playListInfo, nextOne)
    },
    //切换上一首歌
    changePrevMusic() {
      let prevOne = this.playListInfo[this.playListInfo.findIndex(target => {
        return target === this.curId
      }) - 1];
      if (prevOne === -1) prevOne = this.playListInfo.length - 1
      this.setSongListInfo(this.playListInfo, prevOne)
    },
    //点击右下角图标展示右侧的歌单信息
    showRightPlayList() {
      //处理歌单所有歌曲信息的查询(根据id)
      this.$http.get('song/detail', {params: {ids: window.localStorage.getItem('playList')}}).then(res => {
        this.currentMusicListInfo = res.data.songs
        //处理时长数据
        this.currentMusicListInfo.forEach(item => {
          const dt = new Date(item.dt)
          const mm = (dt.getMinutes() + '').padStart(2, '0')
          const ss = (dt.getSeconds() + '').padStart(2, '0')
          item.dt = mm + ':' + ss
        })
      })
      this.showRightPlayListDialog = !this.showRightPlayListDialog
    },
    //表单的双击事件
    playRightMusicList(row) {
      //右下角点击事件生效  播放该音乐
      this.setSongListInfo(this.playListInfo, row.id)
    },
    //跳转音乐播放详情界面
    toMusicDetailPage() {
      this.$router.push('/musicDetail/' + this.curId);
    },
    //点击未登录按钮
    handleLogin() {
      this.loginMusic()
      this.loginDialogVisible = true
    },
    // 监测登录状态
    checkIsLogin(unikey) {
      this.$http.get('login/qr/check', {params: {key: unikey}}).then(res => {
        if (res.data.code === 803) {
          clearInterval(this.timer)
          this.cookieLogin = res.data.cookie
          window.localStorage.setItem('musicCookie', res.data.cookie)
          document.cookie = res.data.cookie
          // window.localStorage.setItem('currentUserInfo', JSON.stringify(res.data.profile))
          this.$http.get('login/status').then(res => {
            this.currentUserInfo = res.data.data.profile
            window.localStorage.setItem('currentUserInfo', JSON.stringify(res.data.data.profile))
            this.$http.get('user/detail', {params: {uid: this.currentUserInfo.userId}}).then(res => {
              this.level = res.data.level
              window.localStorage.setItem('level', this.level)
            })
          })
          // window.location.reload()
        }
      })
    },
    // 点击登录
    loginMusic() {
      this.$http.get('login/qr/key').then(res => {
        const unikey = res.data.data.unikey
        this.$http.get('login/qr/create', {params: {key: unikey}}).then(res => {
          const QR = this.generateQR(res.data.data.qrurl)
          this.$('#QRCODE').attr('src', QR)
          this.timer = setInterval(this.checkIsLogin, 3000, unikey)
        })
      })
      /*loginMusic() {
        this.$refs.loginInfoRuleForm.validate(valid => {
          if (!valid) return this.$message.error('请填写正确的信息')
          this.$http.get('login/cellphone', {params: this.loginInfo}).then(res => {
            if (res.status !== 200) return this.$message.error('登陆失败,请检查登录信息!')
            //保存cookie的信息
            window.localStorage.setItem('musicCookie', res.data.cookie)
            //保存用户信息,退出时删除
            window.localStorage.setItem('currentUserInfo', JSON.stringify(res.data.profile))
            //放入用户的信息
            this.currentUserInfo = res.data.profile
            this.getUserPrivatePlayList()
            //隐藏弹窗
            this.loginDialogVisible = false
          })
        })
      }*/
    },
    //查询用户私人歌单
    getUserPrivatePlayList() {
      this.$http.get('user/playlist', {params: {uid: this.currentUserInfo.userId}}).then(res => {
        this.currentUserPlayList = res.data.playlist
      })
    },
    //重设登录框的表单信息
    handleLoginDialogClosed() {
      this.$refs.loginInfoRuleForm.resetFields();
    },
    //退出登录
    logout() {
      this.$http.get('logout').then(res => {
        //当前用户信息设置为null
        this.currentUserInfo = null
        //存储用户信息的localstorage设置为null
        // window.localStorage.setItem('currentUserInfo', null)
        window.localStorage.removeItem('currentUserInfo')
        //查询出来的用户私人歌单设置为空
        this.currentUserPlayList = []
      })
    },
    //点击切换当前用户歌单的歌单id
    changePlaylistId(playListId) {
      //让歌单页面可以识别到歌单切换
      //使用自定义的设置我们的 localstorage 以便于后面的组件可以监听
      this.resetSetItem('currentId', playListId);

    },
    //跳转搜索页面
    toSearchPage() {
      if (this.searchData.trim() !== '') {//搜索条件不为空
        //encodeURIComponent参数转换 应对中文参数
        this.$router.replace('/search/' + encodeURIComponent(this.searchData))
        //调用子类的方法 实现搜索响应式
        this.$refs.child.toSingSearchPage()
      }
    },
    // 热搜搜索跳转
    hotToSearchPage(name) {
      this.searchData = name
      this.toSearchPage()
    }
  },
  components: {
    child: SearchPage
  },
}
</script>

<style lang="less" scoped>
.showHot {
  height: 200px;
  overflow: hidden;
  overflow-y: scroll;
  z-index: 999;
  position: relative;
  top: 40px;
  left: -280px;
  font-family: sans-serif;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.222);
}

::-webkit-scrollbar {
  display: none;
}

.showHot .box {
  //position: relative;
  color: black;
  width: 300px;
  padding: 16px;
  background-color: rgba(128, 70, 70, 0.07);
  backdrop-filter: blur(20px);
  transition: all ease .3s;
}

.showHot .box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.showHot:hover {
  box-shadow: 0px 5px 15px 0px rgba(255, 0, 0, 0.25);
}

.el-header {
  background: rgb(236, 65, 65);
  height: 50px;
  display: flex;

  .logo {
    width: 158px;
    height: 37px;
    margin: 10px;
    border-radius: 100px;
  }

  span {
    font-size: 20px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-weight: 500;
    margin-top: 15px;
    color: white;
  }

  .el-input {
    width: 275px;
  }

  /deep/ .el-input__inner {
    opacity: 0.4;
    margin-top: 15px;
    margin-left: 50px;
    width: 225px;
    height: 25px;
    border-radius: 12px;
  }

  .searchBtn {
    opacity: 0;
    position: absolute;
    float: right;
    width: 1px;
    height: 24px;
    left: -3px;
    margin-top: 15px !important;
    border-radius: 60%;
  }
}

.rightContainer {
  margin-left: auto;

  span {
    font-size: 17px;
    color: white;
  }

  .userIcon {
    width: 30px;
    height: 30px;
    border-radius: 60%;
    margin-top: 13px;
    margin-right: 10px;
  }
}

/deep/ .el-menu-item-group__title {
  padding-left: 5px !important;
  margin-top: 7px;
}

.el-menu-item {
  height: 45px;
  line-height: 3.45em;
}

.el-menu-item.is-active {
  color: black;
  border-left: 2px solid red !important;
}

.el-menu {
  height: 92%;
}

.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  box-shadow: 0 0 0 0;

}

/deep/ .el-card__body {
  padding: 0 !important;
}

/deep/ .el-slider__button {
  border: 2px solid rgb(198, 47, 47) !important;
}

/deep/ .el-slider__button {
  width: 10px !important;
  height: 10px !important;
}

/deep/ .el-slider__bar {
  background-color: rgb(198, 47, 47);
}

.el-slider {
  width: 80%;
  margin: 0 auto;
}

.laba {
  position: absolute;
  top: 6px;
  left: 15%;
  cursor: pointer
}

.el-footer {
  padding: 0;
}

/deep/ .el-dialog--center {
  text-align: end;
  float: right;
}

/deep/ .el-dialog__title {
  float: left;
}
</style>
